<template>
  <view class="container">
    <block v-if="isload">
      <view class="level-pay">
        <view class="xianshi">限时特惠</view>
        <view class="up-day">升级{{ nextlevel.yxqdate }}天</view>
        <view class="up-money"
          >￥<text class="up-price">{{ nextlevel.apply_paymoney }}</text></view
        >
        <view class="dengji">会员等级:{{ nextlevel.name }}</view>
      </view>
      <view class="level-btn">
        <view class="upbtn" @tap="addpay()">确认协议并支付</view>
      </view>
      <view class="xieyi">
        <view class="flex-y-center" style="margin-left: 30rpx; color: #999">
          <checkbox-group @change="isagreeChange"
            ><label class="flex-y-center">
              <checkbox value="1" :checked="isagree"></checkbox>开通前请阅读
            </label></checkbox-group
          >
          <text style="color: #666" @tap="showxieyiFun">《会员协议》</text>
        </view>
      </view>

      <!--会员权益-->
      <view class="member-quanyi">
        <view class="member_tip"> <view class="shuxian"></view>会员权益 </view>
        <view class="level-list">
          <view class="level-item">
            <view class="level-name">
              <image :src="static_url + '/static/img/vip.png'"></image>
              {{ nextlevel.name }}
            </view>
            <view class="level-quanyilist">
              <parse :content="nextlevel.explain" />
            </view>
          </view>
        </view>
      </view>
      <!--兑换会员卡-->
    </block>

    <view
      id="xieyi"
      :hidden="!showxieyi"
      style="
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        background: rgba(0, 0, 0, 0.7);
      "
    >
      <view
        style="
          width: 90%;
          margin: 0 auto;
          height: 85%;
          margin-top: 10%;
          background: #fff;
          color: #333;
          padding: 5px 10px 50px 10px;
          position: relative;
          border-radius: 2px;
        "
      >
        <view style="overflow: scroll; height: 100%">
          <parse :content="xieyi" />
        </view>
        <view
          style="
            position: absolute;
            z-index: 9999;
            bottom: 10px;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
          "
          @tap="hidexieyi"
          >已阅读并同意</view
        >
      </view>
    </view>

    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,

      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      userinfo: [],
      userlevel: [],
      sysset: [],
      cardno: "",
      cardpwd: "",
      cardinfo: { id: 0 },

      hasnext: 0,
      nextlevel: {},
      _initdata: {},
      vipimg: "",
      isagree: false,
      showxieyi: false,
      xieyi: "",
    };
  },
  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    getdata: function () {
      var that = this;
      that.loading = true;
      app.post(
        "My/levelinfo",
        {
          id: that.opt.id,
          needinit: 1,
        },
        function (res) {
          that.loading = false;
          if (res.userinfo) {
            that.userinfo = res.userinfo;
            that.userlevel = res.userlevel;
            that.cardinfo = res.cardinfo;
            that.nextlevel = res.nextlevel;
            that.hasnext = res.hasnext;
            that.vipimg = res._initdata.membercardimg;
            that.show = true;
            that.xieyi = res.nextlevel ? res.nextlevel.paymoneyxieyi : null;
          }
          that.loaded();
        }
      );
    },
    addpay: function (e) {
      var that = this;
      var formdata = {};
      formdata.levelid = that.nextlevel.id;
      if (!that.isagree) {
        app.alert("请先同意会员协议");
        return;
      }
      if (formdata.levelid == "") {
        app.alert("请联系管理员");
        return;
      }
      app.showLoading("提交中");
      app.post("My/buyVip", formdata, function (res) {
        //app.post('My/levelup', formdata, function (res) {
        app.showLoading(false);
        if (res.status == 0) {
          app.alert(res.msg);
          return;
        }
        app.success(res.msg);
        setTimeout(function () {
          app.goto(res.url);
        }, 1000);
      });
    },
    isagreeChange: function (e) {
      console.log(e.detail.value);
      var val = e.detail.value;
      if (val.length > 0) {
        this.isagree = true;
      } else {
        this.isagree = false;
      }
    },
    showxieyiFun: function () {
      this.showxieyi = true;
    },
    hidexieyi: function () {
      this.showxieyi = false;
      this.isagree = true;
    },
  },
};
</script>
<style>
page {
  background: #fbe7e0;
}

.topbg {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30rpx;
}

.topinfo {
  margin-top: 70rpx;
  width: 670rpx;
  height: 270rpx;
  padding: 60rpx 50rpx;
  display: flex;
  justify-content: center;
  position: relative;
}

.topinfo .headimg {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.topinfo .info {
  display: flex;
  flex: auto;
  flex-direction: column;
  padding-left: 20rpx;
  height: 120rpx;
}

.topinfo .info .nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
}

.topinfo .info .endtime {
  color: #fff;
  font-size: 24rpx;
  margin-top: 20rpx;
}

.topinfo .set {
  position: absolute;
  top: 30rpx;
  right: 40rpx;
  width: 70rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 50rpx;
  text-align: center;
  color: #fff;
}

.topbg .upbtn {
  margin-top: 10rpx;
  width: 660rpx;
  height: 110rpx;
  line-height: 90rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
}

.user-level {
  color: #b48b36;
  background-color: #ffefd4;
  margin-top: 4rpx;
  width: auto;
  height: 36rpx;
  border-radius: 18rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.user-level .level-img {
  width: 32rpx;
  height: 32rpx;
  margin-right: 6rpx;
  margin-left: -14rpx;
  border-radius: 50%;
}

.user-level .level-name {
  font-size: 24rpx;
}

.explain {
  width: 100%;
  margin: 20rpx 0;
}

.explain .f1 {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  height: 50rpx;
  line-height: 50rpx;
}

.explain .f2 {
  padding: 20rpx;
  background-color: #fff;
}

.contentbox-top {
  padding: 0rpx 40rpx;
  background: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 320rpx;
}

.member-info {
  display: flex;
  padding: 80rpx 0rpx 0rpx 20rpx;
}

.member-info .title {
  margin-left: 32rpx;
}

.member-avatar image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.tips {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 60rpx;
}

.apply-title {
  color: #010101;
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
  margin: 20rpx 0rpx;
}

.member-quanyi {
  background-color: #333333;
  border-radius: 12rpx;
  margin: 20rpx 20rpx 20rpx 20rpx;
  padding: 40rpx;
  color: #fff;
}

.member-quanyi .mylevel-name {
  font-size: 36rpx;
  font-weight: bold;
}

.member-quanyi .levelup-info {
  margin: 14rpx 0rpx;
}

.member-quanyi .levelup-heng {
  height: 20rpx;
  background: #f4ce98;
  border-radius: 30rpx;
}

.member-quanyi .member-level-two {
  display: flex;
  justify-content: space-between;
  margin: 14rpx 0rpx;
}

.member_tip {
  color: #f4ce98;
  margin: 44rpx 0rpx 24rpx 0rpx;
  display: flex;
  align-items: center;
}

.member_tip .shuxian {
  background-color: #f4ce98;
  height: 36rpx;
  width: 12rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
}

.level-list {
  margin: 24rpx 0rpx;
}

.level-list .level-item {
  margin-bottom: 20rpx;
}

.level-list .level-item .level-name {
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.level-list .level-item .level-name image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}

.level-list .level-item .level-quanyilist .wxParse {
  color: #fff;
}

.level-list .level-item .level-quanyilist .wxParse .ul,
.wxParse .ol {
  margin: 16rpx 0rpx;
}

.level-list .level-item .level-quanyilist .wxParse .ul,
.wxParse .li {
  margin: 6rpx 0rpx;
}

.level-list .level-item .level-quanyilist {
  margin-left: 32rpx;
}

.level-btn {
  margin: 60rpx 0rpx 20rpx 0rpx;
}

.level-btn .upbtn {
  background: #f2b69e;
  text-align: center;
  padding: 20px;
  border-radius: 60rpx;
  margin: 20rpx 20rpx 20rpx 20rpx;
  color: #802f1a;
  font-weight: bold;
  font-size: 30rpx;
}

.buy-list {
  margin: 40rpx;
  background: #fff;
  border-radius: 24rpx;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 40rpx 0rpx 40rpx;
  color: #eb544d;
}

.buy-list .buy-item {
  display: grid;
  margin: auto;
  text-align: center;

  line-height: 66rpx;
}

.buy-list .buy-item image {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  margin: auto;
}

.membercard-tips {
  margin: 40rpx;
  background: #efdf9b;
  border-radius: 24rpx;
  padding: 20rpx 40rpx;
}

.membercard-tips .tips-title {
  text-align: center;
}

.search-keyword {
  display: flex;
  margin: 40rpx;
}

.search-input {
  height: 80rpx;
  line-height: 80rpx;
  width: 88%;
}

.search-input input {
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  padding-left: 18rpx;
  border-radius: 6rpx 0rpx 0rpx 6rpx;
}

.search-btn {
  width: 12%;
  color: #fff;
  text-align: center;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0rpx 18rpx 18rpx 0rpx;
  background-color: #eb544d;
}

.membercard-vip {
  position: relative;
  margin: 0rpx 30rpx;
}

.membercard-vip .tips-title image {
  width: 100%;
  height: 400rpx;
}

.membercard-vip .tips-content {
  position: absolute;
  color: #fff;
  top: 300rpx;
  left: 34%;
}

.level-pay {
  background: linear-gradient(9deg, #fae6dd, #f27a3b);
  border-radius: 13rpx;
  margin: 60rpx 20rpx;
  padding: 140rpx;
  text-align: center;
  position: relative;
}

.level-pay .xianshi {
  position: absolute;
  color: #fff;
  border-radius: 17rpx;
  top: 0rpx;
  left: 0;
  padding: 12rpx 20rpx;
  background: linear-gradient(9deg, #f27a3b, #f1544b);
}

.level-pay .dengji {
  position: absolute;
  color: #fff;
  bottom: 0rpx;
  left: 0;
  padding: 12rpx 20rpx;
  background: #f85864;
  text-align: left;
  width: 100%;
  border-radius: 0rpx 0rpx 13rpx 13rpx;
}

.level-pay .up-day {
  color: #802f1a;
}

.level-pay .up-money {
  color: #802f1a;
  padding-top: 24rpx;
}

.level-pay .up-money .up-price {
  font-size: 48rpx;
  font-weight: bold;
}
</style>
